<template>
	<view>
		<!-- 顶部导航 -->
		<view class="u-flex u-row-center u-col-center signin" :style="[{ background: '#374486' }]">
			<view class="u-flexs u-m-b-50">
				<view class="u-flex u-row-center u-col-center garden1" @click="goSignin">
					<view class="garden2" :class="is_signin ? 'is-signin' : 'no-signin'"></view>
					<view class="u-flex u-row-center u-col-center garden3 u-font-30" :class="is_signin ? 'is-signin' : 'no-signin'" v-text="is_signin ? '已签到' : '签到'"></view>
				</view>
				<!-- <view class="u-score-color u-m-t-50" v-text="11"></view> -->
			</view>
			<!-- <view class="rule u-tips-color" @click="show = true">签到规则</view> -->
		</view>

		<view>
			<!-- 插入模式 -->
			<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		</view>

		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import {
	signin, // 签到首页
	monthSign, // 每日签到情况
	dosign, // 立即签到
	fillup, // 签到补签
	signLog, // 签到日志
	rank //排行榜
} from '@/common/api.js';

/**
 * 获取任意时间
 */
function getDate(date, AddDayCount = 0) {
	if (!date) {
		date = new Date();
	}
	if (typeof date !== 'object') {
		date = date.replace(/-/g, '/');
	}
	const dd = new Date(date);

	dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

	const y = dd.getFullYear();
	const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
	const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
	return {
		fullDate: y + '-' + m + '-' + d,
		year: y,
		month: m,
		date: d,
		day: dd.getDay()
	};
}
export default {
	onShow() {
		// this.getSigninConfig();
		// console.log('background: theme.bgColor', this.theme.bgColor);
	},
	data() {
		return {
			show: false,
			showCalendar: false,
			info: {
				lunar: true,
				range: true,
				insert: false,
				selected: []
			},
			// 是否签到
			is_signin: false
		};
	},
	methods: {
		open() {
			this.$refs.calendar.open();
		},
		close() {
			console.log('弹窗关闭');
		},
		change(e) {
			console.log('change 返回:', e);
			// 模拟动态打卡
			// if (this.info.selected.length > 5) return;
		},
		confirm(e) {
			console.log('confirm 返回:', e);
		},
		monthSwitch(e) {
			console.log('monthSwitchs 返回:', e);
		},
		getSigninConfig() {
			this.$api.signinConfig().then(res => {
				if (res.code) {
					this.$u.vuex('vuex_signin', res.data);
				}
			});
		},
		//签到
		async goSignin() {
			this.is_signin = true;
			// 点击签到之后 调用立即签到接口
			let { msg } = await dosign(); // 立即签到
			// 在日历上体现打卡
			this.info.selected.push({
				date: e.fulldate,
				info: '打卡'
			});
		}
	},
	async onShow() {
		let { msg } = await signin(); // 签到首页
		uni.$u.toast(msg);
		let data = await monthSign(); // 每日签到情况
		for (const key in data) {
			console.log('key', key);
			let time = uni.$u.timeFormat(new Date(), 'yyyy-mm-' + key);
			this.info.selected.push({
				date: time,
				info: '已打卡'
			});
			if (time === uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')) {
				this.is_signin = true;
			}
		}
		// 在日历上体现打卡情况
		// this.info.selected.push({
		// 	// date: e.fulldate,
		// 	info: '打卡'
		// });
		// dosign(); // 立即签到

		// signLog(); // 签到日志
		// rank(); //排行榜
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f4f6f8;
}
.signin {
	height: 450rpx;
	position: relative;
	.u-flexs {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.garden1 {
		width: 180rpx;
		height: 180rpx;
		border-radius: 200rpx;
		background-color: rgba(255, 255, 255, 0.4);
		position: relative;
		.garden2 {
			width: 150rpx;
			height: 150rpx;
			border-radius: 200rpx;
			background-color: rgba(255, 255, 255, 0.7);
			position: absolute;
			left: 15rpx;
			top: 15rpx;
			z-index: 80;
			.is-signin {
				color: #909399;
			}
			&.no-signin {
				animation: gardens2 2s infinite;
			}
		}
		.garden3 {
			width: 120rpx;
			height: 120rpx;
			border-radius: 200rpx;
			background-color: #ffffff;
			position: relative;
			z-index: 100;
			&.no-signin {
				animation: gardens3 2s infinite;
			}
		}
	}
	.u-score-color {
		color: #e0e0e0;
	}
	.rule {
		position: absolute;
		right: 0;
		top: 50rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 5rpx 10rpx 5rpx 20rpx;
	}
}
.number {
	position: relative;
	top: -65rpx;
	.u-col-center {
		height: 130rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 5px 0px rgba(0, 34, 144, 0.1);
		.u-row-around {
			width: 100%;
		}
	}
}

@keyframes gardens2 {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}
</style>
<style scoped lang="scss">
.bg-white {
	background-color: #ffffff;
}
</style>
